<template>
	<view class="homeOrderDetail page">
		<up-toast ref="uToastRef"></up-toast>
		<view class="driverDetailTop">
			<view>
				<image src="../../static/start.png"></image>
				<text>{{details.startPlace}}</text>
			</view>
			<view>
				<image src="../../static/end.png"></image>
				<text>{{details.stopPlace}}</text>
			</view>
		</view>
		<view class="orderDetail">
			<view class="total">
				<view class="item">
					<text>预估价格</text>
					<text class="num">{{details.estimateMoney}}</text>
					<text>元</text>
				</view>
				<view class="item">
					<text>距离客人</text>
					<text class="num">{{details.distance}}</text>
					<text>公里</text>
				</view>
				<view class="item">
					<text>服务路程</text>
					<text class="num">{{details.kilometre}}</text>
					<text>公里</text>
				</view>
			</view>
			<view class="phone" @click="handleCall">
				<up-icon class="btn" name="arrow-right" color="#A6A6A6" size="14"></up-icon>联系客户
			</view>
		</view>
		<view class="btn-box">
			<up-button type="primary" @click="handleOrderGo" :loading="loading"></up-button>接单(<up-count-down :time="50 * 1000" format="ss" @finish="handleFinish"></up-count-down>)
		</view>
	</view>
</template>

<script setup>
import http from "@/request/index.js"
import { reactive } from 'vue';

const details = reactive({});
const timer = ref(null);
const loading = ref(false);
const ttsModule = ref(null);
const uToastRef = ref(null)
const props = defineProps({
  query: String
});

onMounted(() => {
	let detailsArr = JSON.parse(props.query)
	details = detailsArr
	ttsModule.value = uni.requireNativePlugin("hm-tts-TtsModule")
	ttsModule.value.init((ret) => {});
})

const handleCall = () => {
	uni.makePhoneCall({
		phoneNumber: details.byTel
	});
}

const handleFinish = () => {
	uni.navigateBack()
}
const handleBack = () => {
	uni.navigateBack()
}
const handleOrderGo = async() => {
	let { id } = details
	loading.value = true
	let { code, msg, data } = await http(`/app/order/updateReceivedOrderById/${id}`, 'GET')
	loading.value = false
	if (code != 200) return uni.showToast({ title: msg, icon: "none" })
	if (code == 200) {
		uToastRef.value.show({ message: `接单成功！`, type: 'success' })
		ttsModule.value.speak({text: '您已接单，请及时联系客户~'})
		timer.value && clearTimeout(timer.value)
		timer.value = setTimeout(() => {
			uni.redirectTo({
				url: '/pages/homeOrder/ordering'
			})
		}, 2000)
	}
}

</script>

<style scoped lang="scss">
.homeOrderDetail {
	width: 100%;
	height: 100vh;
	background-color: #fff;
	.driverDetailTop {
		min-height: 110px;
		padding: 20px 15px;
		background-color: #F7F9FD;
		>view {
			margin-top: 10px;
		}
		image {
			width: 24px;
			height: 24px;
			vertical-align: top;
		}
		text {
			display: inline-block;
			width: calc(100% - 40px);
			vertical-align: top;
			font-size: 16px;
			font-weight: bold;
		}
	}
	.orderDetail {
		.total {
			width: 100%;
			height: 80px;
			color: #9B9B9B;
			padding-top: 30px;
			.item {
				width: calc(33.3% - 2px);
				float: left;
				text-align: center;
				overflow: hidden;
				text {
					display: block;
					width: 100%;
					overflow: hidden;
					font-size: 12px;
				}
				.num {
					padding: 8px 0;
					font-weight: bold;
					font-size: 16px;
					color: #333;
				}
			}
		}
		.phone {
			width: 100px;
			padding: 4px 10px;
			margin-top: 50px;
			font-size: 16px;
			text-align: center;
			color: #3C9CFF;
			border: 1px solid #3C9CFF;
			margin: 50px auto;
		}
	}
	.btn-box {
		text-align: center;
		.up-button {
			width: 120px;
			line-height: 40px;
			display: inline-block;
			margin: 0 15px;
		}
		.up-count-down {
			display: inline-block;
		}
	}
}
</style>
<style lang="scss">
.homeOrderDetail {
	::v-deep .up-count-down__text {
		color: #fff !important;
	}
	.up-icon {
		display: inline-block !important;
	}
}
</style>